<template>
  <ve-cell :label="label">
    <view class="ve-cell-price" :style="{ textAlign: priceAlign }" :class="{ light: light }">
      {{ price }} <text>{{ unit }}</text>
      <text v-if="addon">({{ addon }})</text>
    </view>
  </ve-cell>
</template>

<script>
  import { numFormatThousands } from '../../utils/tools.js'
  export default {
    props: {
      label: String,
      value: [String, Number],
      unit: {
        type: String,
        default: '元',
      },
      addon: {
        type: String,
      },
      light: Boolean,
      priceAlign: {
        type: String,
        default: 'left',
      },
      // 金额是否千分位
      amountThousands: {
        type: Boolean,
        default: false,
      },
    },
    computed: {
      price() {
        if (this.value == null) return '-'
        let val = this.value || 0
        return this.amountThousands ? numFormatThousands(this.value) : val
      },
    },
  }
</script>

<style lang="scss" scoped>
  .ve-cell-price {
    font-size: 30rpx;
    font-weight: 400;
    line-height: 40rpx;
    width: 100%;

    &.light {
      color: #3072f6;
    }
  }
</style>
